<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>:not实现背景元素模糊</title>
  <!--  <link rel="stylesheet" href="./styles/index.css">-->
</head>
<style>
  .s-blur > :not(.g-wrap) {
    filter: blur(2px);
  }
  .s-blur > :not(.g-wrap)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    filter: blur(2px);
    z-index: 2;
  }

  .g-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    height: 50vh;
    background: #000;
    color: #fff;
    text-align: center;
    line-height: 50vh;
    font-size: 30px;
  }

  .g-container {
    position: relative;
  }

  .g-header,
  .g-content,
  .g-footer {
    padding: 20px;
    text-align: center;
    font-size: 20px;
    line-height: 40px;
    box-sizing: border-box;
    color: #fff;
    overflow: hidden;
  }

  .g-header,
  .g-footer {
    height: 20vh;
    background: brown;
  }

  .g-content {
    height: 60vh;
    background: #77ccdd;
  }

</style>
<body>
<ul>
  <li>可以利用这个伪类写一个完全没有用处的选择器。例如， :not(*) 匹配任何非元素的元素，因此这个规则将永远不会被应用。</li>
  <li>可以利用这个伪类提高规则的优先级。例如， #foo:not(#bar) 和 #foo 会匹配相同的元素。 但是前者的优先级更高。</li>
  <li>:not(foo) 将匹配任何非foo元素，包括html和body。</li>
  <li>这个选择器只会应用在一个元素上，你无法用它排除所有父元素。比如， body :not(table) a 将依旧会应用在table内部的<a> 上, 因为 <tr>将会被 :not()这部分选择器匹配。</li>
</ul>
<div class="container s-blur">
  <div class="g-header">Header</div>
  <div class="g-content">
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
    <p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
  </div>
  <div class="g-footer">Footer</div>
  <div class="g-wrap">
    利用:not()伪类使除了弹窗之外的所有元素都进行模糊
  </div>
</div>
</body>
</html>
